import { View, StyleSheet, Text, Pressable } from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import { common } from '../assets/style/common'
import { useState } from 'react'
import Animated from 'react-native-reanimated'
import { useCardAnimation } from '@react-navigation/stack'

export default function ShareModel({ navigation }: any) {
  const { current } = useCardAnimation()
  const [menu] = useState([
    { icon: '', txt: '消息' },
    { icon: '', txt: '回到首页' },
    { icon: '', txt: '分享' },
    { icon: '', txt: '我的' },
    { icon: '', txt: '购物车' },
    { icon: '', txt: '客服' },
    { icon: '', txt: '举报' },
  ])
  function goBack() {
    navigation.goBack()
  }
  return (
    <View style={styles.shareModel}>
      <Animated.View
        style={[
          styles.boxCard,
          common.flexCol,
          { flexDirection: 'column' },
          {
            transform: [
              {
                translateY: current.progress.interpolate({
                  inputRange: [0, 1],
                  outputRange: [200, 0],
                  extrapolate: 'clamp',
                }),
              },
            ],
          },
        ]}
      >
        <View style={[styles.menus, common.flexCol]}>
          {menu.map((item, key) => (
            <View key={key} style={[common.flexCol, styles.iconWrap]}>
              <View style={styles.iconCircle} />
              <Text style={styles.iconTxt}>{item.txt}</Text>
            </View>
          ))}
        </View>

        <SafeAreaView style={styles.btnWrap}>
          <Pressable style={styles.btn} onPress={goBack}>
            <Text style={styles.txt}>取消</Text>
          </Pressable>
        </SafeAreaView>
      </Animated.View>
    </View>
  )
}

const styles = StyleSheet.create({
  shareModel: {
    width: '100%',
    height: '100%',
    backgroundColor: '#00000088',
  },
  menus: {
    flex: 1,
    paddingLeft: 12,
    flexWrap: 'wrap',
  },
  boxCard: {
    height: 320,
    backgroundColor: '#e1e1e1',
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
    width: '100%',
    position: 'absolute',
    bottom: 0,
    left: 0,
    paddingBottom: 20,
  },
  btnWrap: {
    PaddingLeft: 12,
    paddingRight: 12,
    width: '100%',
  },
  btn: {
    height: 44,
    marginLeft: 12,
    marginRight: 12,
    borderRadius: 22,
    backgroundColor: '#f1f1f1',
  },
  txt: {
    textAlign: 'center',
    lineHeight: 44,
    fontSize: 16,
    color: '#333333',
  },
  iconCircle: {
    width: 60,
    height: 60,
    borderRadius: 33,
    backgroundColor: '#ffff',
    marginBottom: 8,
  },
  iconTxt: {
    color: '#333',
  },
  iconWrap: {
    paddingTop: 24,
    flexDirection: 'column',
    alignItems: 'center',
    marginRight: 24,
  },
})
